<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="./js/vue.js"></script>
    <script src="./js/vue-router.js"></script>
    <div id="app">
        <!-- 导航 -->
        <nav>
            <ul>
                <li>
                    <router-link to="/home">首页</router-link>
                </li>
                <li>
                    <router-link to="/news">新闻</router-link>
                </li>
                <li>
                    <router-link to="/hot">热门</router-link>
                </li>
            </ul>
        </nav>
        <div id="show">
            <!-- 内容展示区域(占位符) -->
            <router-view></router-view>
        </div>
    </div>
    <template id="newsT">
        <div>
            <h1>新闻列表</h1>
            <router-link to="/news/film">电影</router-link>
            <router-link to="/news/read">读书</router-link>
            <div id="cshow" style="background-color: pink;">
                <router-view></router-view>
            </div>
        </div>
    </template>
    <template id="hotT">
        <div>
            <h1>热门新闻</h1>
            <ul>
                <li>
                    <router-link to="/hot/1/zhangsan">1.第一条热门新闻 id 1</router-link>
                </li>
                <li>
                    <router-link to="/hot/2/yiqing">1.第一条热门新闻 id 2</router-link>
                </li>
                <li>
                    <router-link to="/hot/3/lisi">1.第一条热门新闻 id 3</router-link>
                </li>
            </ul>
        </div>
    </template>
    <template id="detailT">
        <div>
            <h1>新闻详细页面</h1>
            <span>接收传递过来的id:{{$route.params.id}} {{$route.params.cont}}</span>
        </div>
    </template>
    <script>
        // 1. 组件
        let Home = Vue.extend({template:"<h1>首页content</h1>"});
        let News = {template:"#newsT"};
        let Hot = {template:"#hotT"};
        let HotDetail = {template:"#detailT"};
        let NotFound404 = {template:"<div>404</div>"}

        // 2. 配置页面的路径信息(多个)
        let routes = [
            {path:"/",redirect:"/home"},
            {path:"/home",component:Home},
            {path:"/news",component:News,children:[
                {path:"film",component:{template:"<div>电影内容</div>"}},
                {path:"read",component:{template:"<div>读书内容</div>"}},
                // 跳转
                {path:"/",redirect:"film"}
            ]},
            {path:"/hot",component:Hot},
            // 传参配置
            {path:"/hot/:id/:cont",component:HotDetail},
            // 匹配所有路径
            {path:"*",component:NotFound404}
        ]

        // 3. 创建路由对象 VueRouter
        let router = new VueRouter({
            routes
        })
        let vm = new Vue({
            el:"#app",
            // 配置路由
            router
        })
    </script>
</body>
</html>